<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<link href="#springUrl('/static/css/bootstrap.min.css')" rel="stylesheet">
	<link href="#springUrl('/static/css/style.css')" rel="stylesheet">
    <link href="#springUrl('/static/css/plugins/bootstrap-table/bootstrap-table.min.css')" rel="stylesheet">
</head>
<body class="white-bg">
<div class="ibox-content" style="width: 430px;">
   <form id="myForm" class="form-horizontal" autocomplete="off" data-validator-option="{theme:'default'}">
       <div class="form-group"><label class="col-sm-2 ">地下水迁移路径分数</label>
      		<div class="col-sm-10">
			<input id="c1" type="text" class="form-control" name="ground_water"   placeholder="请输入该路径分数" data-rule="地下水:required;ground_water">
      		</div>
       </div>
        <div class="form-group"><label class="col-sm-2 ">地表水迁移路径分数</label>
            <div class="col-sm-10">
            <input id="c2" type="text"  class="form-control" name="surface_water"  placeholder="请输入该路径分数" data-rule="地表水:required;surface_water">
            </div>
        </div>
        <div class="form-group"><label class="col-sm-2 control-label">土壤暴露途径得分</label>
            <div class="col-sm-10">
                <input id="c3" type="text"  class="form-control" name="soil"  placeholder="请输入该途径分数" data-rule="土壤:required;soil">
            </div>
        </div>
       <div class="form-group"><label class="col-sm-2 control-label">空气迁移途径分数</label>
           <div class="col-sm-10">
               <input id="c4" type="text" class="form-control" name="air"  placeholder="请输入该途径分数" data-rule="空气:required;air">
           </div>
       </div>
       <div class="form-group" style="margin-left: 8px">
           <span class="ct1"></span>&sup2;+<span class="ct2" ></span>&sup2;+<span class="ct3"></span>&sup2;+<span class="ct4"></span>&sup2;=<span id="ct5"></span>
       </div>
       <div class="form-group" style="margin-left: 8px">
           (<span class="ct1"></span>&sup2;+<span class="ct2" ></span>&sup2;+<span class="ct3"></span>&sup2;+<span class="ct4"></span>&sup2;)/4=<span id="ct6"></span>
       </div>
       <div class="form-group" style="margin-left: 8px">
           &radic;(<span class="ct1"></span>&sup2;+<span class="ct2" ></span>&sup2;+<span class="ct3"></span>&sup2;+<span class="ct4"></span>&sup2;)/4=<span class="ct7"></span>
       </div>
       <div class="form-group" style="margin-left: 8px">
           <span class="control-label">场地得分:</span>&nbsp;<span class="ct7"></span>
       </div>
        <div class="hr-line-dashed"></div>
       <div class="form-group"><label class="col-sm-2 control-label">评分表:</label>
       <div class="row">
           <div class="col-sm-12">
               <table id="dataTable"></table>
           </div>
       </div>
       </div>
        <div class="form-group">
            <div class="text-center">
                <button class="btn btn-primary" type="submit">保 存</button>
            </div>
        </div>
    </form>
</div>
<script src="#springUrl('/static/js/plugins/bootstrap-table/bootstrap-table.min.js')"></script>
<script src="#springUrl('/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js')"></script>
<script src="#springUrl('/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js')"></script>
<script src="#springUrl('/static/plugins/layer-v2.2/layer/layer.js')"></script>
<script src="#springUrl('/static/js/base_list.js')"></script>
<script src="#springUrl('/static/js/common.js')"></script>
<script src="#springUrl('/static/js/jquery-2.1.1.js')"></script>
<script src="#springUrl('/static/plugins/nice-validator-0.8.1/jquery.validator.js?local=zh-CN')"></script>
<script type="text/javascript">

    $(function(){
        var dataUrl="#springUrl('/perm/role/getRoleList.html')";
        var dataColumns = [{
            field: 'id',
            title: '场地编号'
        }, {
            field: 'site_name',
            title: '场地名称'
        }, {
            field: 'description',
            title: '简介'
        },
            {
                field: 'score',
                title: '得分'
            }, {
                field: 'create_time',
                title: '创建时间'
            },  {
                title: '操作',
                formatter: function (value, row, index) {
                    var id = row.id;
                    return '<a class="btn btn-xs btn-warning" onclick=""><i class="fa fa-pencil"></i>查看</a> '
                        + '<a class="btn btn-xs btn-success" onclick=""><i class="fa fa-edit"></i>分数评比</a>'
                        + '<a class="btn btn-xs btn-danger" onclick=""><i class="fa fa-remove"></i>删除</a> '
                        +'<a class="btn btn-xs btn-info" onclick=""><i class="fa fa-pencil"></i>污染源</a> ';
                }
            }];
        var oTable = new TableInit();
        oTable.Init();
        $('#c1').bind('input propertychange', function() {
           // alert($("input[name=ground_water]").val());
            $('.ct1').text($("input[name=ground_water]").val());
            calculate();
        });
        $('#c2').bind('input propertychange', function() {
            // alert($("input[name=ground_water]").val());
            $('.ct2').text($("input[name=surface_water]").val());
            calculate();
        });
        $('#c3').bind('input propertychange', function() {
            // alert($("input[name=ground_water]").val());
            $('.ct3').text($("input[name=soil]").val());
            calculate();
        });
        $('#c4').bind('input propertychange', function() {
            // alert($("input[name=ground_water]").val());
            $('.ct4').text($("input[name=air]").val());
            calculate();
        });

    })

    function calculate() {
        var c1,c2,c3,c4= 0;
        if ($('.ct1').val()!=null){c1 = $("input[name=ground_water]").val()}
        if ($('.ct2').val()!=null){c2 = $("input[name=surface_water]").val()}
        if ($('.ct3').val()!=null){c3 = $("input[name=soil]").val()}
        if ($('.ct4').val()!=null){c4 = $("input[name=air]").val()}
        $('#ct5').text(Math.pow(c1,2)+Math.pow(c2,2)+Math.pow(c3,2)+Math.pow(c4,2));
        $('#ct6').text((Math.pow(c1,2)+Math.pow(c2,2)+Math.pow(c3,2)+Math.pow(c4,2))/4);
        $('.ct7').text(Math.sqrt((Math.pow(c1,2)+Math.pow(c2,2)+Math.pow(c3,2)+Math.pow(c4,2))/4));
    }


    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#dataTable').bootstrapTable({
                url: dataUrl,     //请求后台的URL（*）
                method: 'get',           //请求方式（*）
                toolbar: '#toolbar',        //工具按钮用哪个容器
                striped: true,           //是否显示行间隔色
                cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,          //是否显示分页（*）
                sortable: false,           //是否启用排序
                sortOrder: "asc",          //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,            //初始化加载第一页，默认第一页
                pageSize: 10,            //每页的记录行数（*）
                pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）
                strictSearch: true,
                clickToSelect: true,        //是否启用点击选中行
                height: 460,            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",           //每一行的唯一标识，一般为主键列
                cardView: false,          //是否显示详细视图
                detailView: false,          //是否显示父子表
                columns: dataColumns
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            return dataQueryParams(params);
        };
        return oTableInit;
    };

    $("#myForm").validator({
        valid: function(form){
            var me = this;
            // 提交表单之前，hold住表单，防止重复提交
            me.holdSubmit();
            $.ajax({
                url: "#",
                data: $(form).serialize(),
                type: "POST",
                success: function(data){
                    var d = JSON.parse(data);
                    if(d.success && d.data){
                        window.parent.location.reload();
                        //当你在iframe页面关闭自身时
                        //var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        //parent.layer.close(index); //再执行关闭
                    } else {
                        //失败，提交表单成功后，释放hold，如果不释放hold，就变成了只能提交一次的表单
                        me.holdSubmit(false);
                    }
                }
            });
        }
    });
</script>
</body>
</html>
